const app = getApp()
var QR = require('../../utils/qrcode.js');
// const ctx = wx.createCanvasContext('myCanvas')
Page({
  data: {
    // logo: '/images/tip.png',
    // img: 'weixin://wxpay/bizpayurl?pr=zo1CqAK',
    img: '/images/sign.png',
    title: '冯贻苗团队正畸大讲堂——螺旋扩弓器扩弓的临床应用方法（第八节）',
    text: '陈 15903665694',
    price: '138.00',
    data:'2019/7/10',
    canvasHidden: false,
    imagePath: '',
    jiaoyanCode: 'weixin://wxpay/bizpayurl?pr=Sxp16er',
    imgback: '/images/qikeya1.png',
    ercode_canvasWidth:'',
    ercode_canvasHeight:'',
    sizew:'',
    sizeh:'',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //option为上个页面传递过来的参数
    var jiaoyanCode = this.data.jiaoyanCode;
    // if (options) {
    //   jiaoyanCode = options.jiaoyanCode;
    // }
    // console.log(jiaoyanCode);
    
    var size = this.setCanvasSize(); //动态设置画布大小 
    this.createQrCode(jiaoyanCode, "mycanvas", size.w, size.h);
  },
  //适配不同屏幕大小的canvas
  setCanvasSize: function () {
    var size = {};
    try {
      var res = wx.getSystemInfoSync();
        var scale = 750 / 686;      //不同屏幕下canvas的适配比例；设计稿是750宽 686是因为样式wxss文件中设置的大小
      // console.log(scale)
      var width = res.windowWidth / scale;
      var height = res.windowHeight / scale;   //canvas画布为正方形
      size.w = width/3.5;
      size.h = height / 3.5;
      this.setData({
        sizew: width / 3.8,
        sizeh: height / 3.8
      })
      // console.log(size.w)
      // console.log(size.h)
    } catch (e) {
      // Do something when catch error
      console.log("获取设备信息失败" + e);
    }
    return size;
  },

  /**
   * 绘制二维码图片
   */
  createQrCode: function (url, canvasId, cavW, cavH) {
    //调用插件中的draw方法，绘制二维码图片
    QR.api.draw(url, canvasId, cavW, cavH);
    setTimeout(() => {
      this.canvasToTempImage();
    }, 1000);
  },
  /**
   * 获取临时缓存照片路径，存入data中
   */
  canvasToTempImage: function () {
    var that = this;
    //把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。
    wx.canvasToTempFilePath({
      canvasId: 'mycanvas',
      success: function (res) {
        var tempFilePath = res.tempFilePath;
        // console.log(tempFilePath);
        that.setData({
          imagePath: tempFilePath,
          // canvasHidden:true
        });
      },
      fail: function (res) {
        console.log(res);
      }
    });
  },


  saveImage1: function () {
    // 生命周期函数--监听页面初次渲染完成
    var ctx = wx.createCanvasContext('canvas')
    // 设置背景
    ctx.setFillStyle('#ffffff')
    ctx.fillRect(0, 0, 300, 355)
    // logo
    ctx.drawImage(this.data.imgback);
    // logo下线条
    // ctx.setStrokeStyle("rgba(0,0,0,.1)")
    // ctx.setLineWidth(0.3)
    // ctx.moveTo(0, 49)
    // ctx.lineTo(300, 49)
    // ctx.stroke()
    // 商品图片
    ctx.drawImage(this.data.imagePath, 0, 0)
    // ctx.drawImage(this.data.imagePath, 0, 0,'','',  100, 0)
    // ctx.drawImage(this.data.imagePath, 0, 0, 260, 260, 0, 0, 260, 260)
    // ctx.drawImage(this.data.imagePath, 0, 0, 300, 300, 0, 0, 300, 300)
    // ctx.drawImage(this.data.imagePath, 0, 0, 600, 400, 40, 0, 450, 300)
    // ctx.drawImage(this.data.img, 0, 180, 750, 500, 10, 58, 280, 165)
    // 商品名称
    ctx.setFontSize(16)
    ctx.setFillStyle("#333333")
    textHandle(this.data.title, 10, 300, 260, 18);
    // textHandle(this.data.title, 10, 248, 170, 18);
    // 商品介绍
    ctx.setFontSize(16)
    ctx.setFillStyle("#333333")
    textHandle(this.data.text, 10, 345, 170, 15);
    // 商品价格
    ctx.setFontSize(18)
    ctx.setFillStyle("#F62B19")
    ctx.fillText('¥' + this.data.price, 220, 390,100, 400);

    // 支付方式
    ctx.setFontSize(18);
    // ctx.font = 'bold';
    ctx.setFillStyle("#F62B19")
    ctx.fillText('支付方式：支付宝', 12, 390);

    // ctx.setFontSize(12)
    // ctx.setFillStyle("#333333")
    // textHandle(this.data.data, 10, 360, 170, 15);

    
    // 二维码文字
    // ctx.setFontSize(10)
    // ctx.setFillStyle("#666666")
    // ctx.fillText('扫描或长按二维码', 210, 246);
    // 二维码图片
    // ctx.drawImage(this.data.code, 210, 258, 80, 80);

    /**
     * @function textHandle 绘制文本的换行处理
     * @param text 在画布上输出的文本
     * @param numX 绘制文本的左上角x坐标位置
     * @param numY 绘制文本的左上角y坐标位置
     * @param textWidth 文本宽度
     * @param lineHeight 文本的行高
     * @author Moss
     */
    function textHandle(text, numX, numY, textWidth, lineHeight) {
      var chr = text.split(""); // 将一个字符串分割成字符串数组
      var temp = "";
      var row = [];
      for (var a = 0; a < chr.length; a++) {
        if (ctx.measureText(temp).width < textWidth) {
          temp += chr[a];
        } else {
          a--; // 添加a--，防止字符丢失
          row.push(temp);
          temp = "";
        }
      }
      row.push(temp);

      // 如果数组长度大于2 则截取前两个
      if (row.length > 2) {
        var rowCut = row.slice(0, 2);
        var rowPart = rowCut[1];
        var test = "";
        var empty = [];
        for (var a = 0; a < rowPart.length; a++) {
          if (ctx.measureText(test).width < textWidth - 10) {
            test += rowPart[a];
          } else {
            break;
          }
        }
        empty.push(test);
        var group = empty[0] + "..."; // 这里只显示两行，超出的用...展示
        rowCut.splice(1, 1, group);
        row = rowCut;
      }
      for (var b = 0; b < row.length; b++) {
        ctx.fillText(row[b], numX, numY + b * lineHeight);
      }
    }

    // 完成
    // setTimeout(function(){
      ctx.draw(false)
    // })
  },

  saveImage() {
    wx.canvasToTempFilePath({
      canvasId: 'canvas',
      success(res) {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) {
            console.log(res);
            wx.showToast({
              title: '保存成功',
              icon: 'success'
            })
          },
          fail(err){
            // console.log(err);
            if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
              // 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
              wx.showModal({
                title: '提示',
                content: '需要您授权保存相册',
                showCancel: false,
                success: modalSuccess => {
                  wx.openSetting({
                    success(settingdata) {
                      console.log("settingdata", settingdata)
                      if (settingdata.authSetting['scope.writePhotosAlbum']) {
                        wx.showModal({
                          title: '提示',
                          content: '获取权限成功,再次点击图片即可保存',
                          showCancel: false,
                        })
                      } else {
                        wx.showModal({
                          title: '提示',
                          content: '获取权限失败，将无法保存到相册哦~',
                          showCancel: false,
                        })
                      }
                    },
                    fail(failData) {
                      console.log("failData", failData)
                    },
                    complete(finishData) {
                      console.log("finishData", finishData)
                    }
                  })
                }
              })
            // wx.showToast({
            //   title: '保存失败',
            //   icon: 'fail'
            // })
          }
          }
        })
      }
    })
  },


  
})